<template>
  <view class="qiun-columns">
    <view class="top">
      <view class="top-t" :class="{ green: isDecrease }">
        <text class="top-t-l">1.68</text>
        <text class="top-t-r">
          <text class="top-t-r__txt">0.15</text>
          <text class="top-t-r__txt">9.80%</text>
        </text>
      </view>
      <view class="top-m">
        <view class="top-m-item" v-for="(item, index) in openingInfo" :key="index">
          <text class="top-m-item__label">{{ item.label }}</text>
          <text class="top-m-item__value">{{ item.value }}</text>
        </view>
      </view>
      <view class="top-b">
        <view class="top-b-item" v-for="(item, index) in stockBasicInfo" :key="index">
          <div class="top-b-item__label">{{ item.label }}</div>
          <div class="top-b-item__value">{{ item.value }}</div>
        </view>
      </view>
    </view>
    <view class="qiun-bg-white qiun-title-bar qiun-common-mt qiun-rows tab-time-box">
      <view
        class="tab-time"
        v-for="(item, index) in categoryTime"
        :key="index"
        :class="{ active: index === currentCategoryTimeIndex }"
        @click="changeCategoryTime(index, item)"
      >
        <text class="tab-time__txt">{{ item.label }}</text>
      </view>
    </view>
    <view class="qiun-charts" v-show="currentCategoryTimeIndex != 0">
      <canvas
        canvas-id="canvasCandle"
        id="canvasCandle"
        class="charts"
        disable-scroll="true"
        @touchstart="touchCandle"
        @touchmove="moveCandle"
        @touchend="touchEndCandle"
      ></canvas>
    </view>
    <view class="qiun-charts" v-show="currentCategoryTimeIndex == 0">
      <canvas canvas-id="canvasArea" id="canvasArea" class="charts"
        @touchstart="touchCandle"
        @touchmove="moveCandle"
        @touchend="touchEndCandle"></canvas>
    </view>
    <view class="qiun-padding qiun-bg-white">
      <slider
        :value="itemCount"
        min="5"
        :max="sliderMax"
        block-color="#f8f8f8"
        block-size="18"
        @changing="sliderMove"
        @change="sliderMove"
      />
    </view>
    <view class="bottom">
      <view class="bottom-row-l red">
        <view class="bottom-row-item" v-for="(item, index) in tradingInfoBuy" :key="index">
          <text class="bottom-row-item__label">{{ item.label }}</text>
          <text class="bottom-row-item__value">{{ item.value }}</text>
          <text class="bottom-row-item__quantity">{{ item.quantity }}</text>
        </view>
      </view>
      <view class="bottom-row-r green">
        <view class="bottom-row-item" v-for="(item, index) in tradingInfoSell" :key="index">
          <text class="bottom-row-item__label">{{ item.label }}</text>
          <text class="bottom-row-item__value">{{ item.value }}</text>
          <text class="bottom-row-item__quantity">{{ item.quantity }}</text>
        </view>
      </view>
    </view>
    <!-- <navigator url="/pages/home/home" hover-class="navigator-hover"> -->
    <button class="btn" type="default" @click="toCreateStrtegy">创建策略</button>
    <!-- </navigator> -->
  </view>
</template>

<script>
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'
import { isJSON } from '@/common/checker.js'
var _self
var canvaCandle = null
var canvaArea = null

// 当日 渲染数据格式
// 当日 渲染数据格式
let Area = {
  categories: Array.from({ length: 100 }, (item, index) => {
    return (2012 + index).toString();
  }),
  series: [
    {
      name: "成交量C",
      data: Array.from({ length: 100 }, () => {
        return Math.floor(Math.random() * 85 + 4);
      }),
      color: "#1890ff"
    }
  ]
};

// k线图渲染数据
let Candle = {
  categories: ['2019/5/5', '2019/5/6', '2019/5/6', '2019/5/8', '2019/5/9', '2019/5/10'],
  series: [
    {
      name: '上证指数',
      data: [
        [2320.26, 2302.6, 2287.3, 2362.94], // 开盘，收盘，最低，最高
        [2300, 2291.3, 2288.26, 2308.38],
        [2295.35, 2346.5, 2295.35, 2346.92],
        [2347.22, 2358.98, 2337.35, 2363.8],
        [2360.75, 2382.48, 2347.89, 2383.76],
        [2383.43, 2385.42, 2371.23, 2391.82],
        [2377.41, 2419.02, 2369.57, 2421.15],
      ],
    },
  ],
}

export default {
  data() {
    return {
      cWidth: '',
      cHeight: '',
      pixelRatio: 1,
      itemCount: 20, //x轴单屏数据密度
      sliderMax: 50,
      textarea: '',
      isDecrease: true, // 下跌，颜色变绿
      openingInfo: [
        {
          value: 0,
          label: '今开',
        },
        {
          value: 1,
          label: '昨收',
        },
        {
          value: 2,
          label: '最低',
        },
        {
          value: 3,
          label: '最高',
        },
      ], // 开盘信息
      stockBasicInfo: [
        {
          value: '6.54%',
          label: '振幅',
        },
        {
          value: '1234453',
          label: '成交量',
        },
        {
          value: '1234453',
          label: '成交额',
        },
        {
          value: '1234453',
          label: '内盘',
        },
        {
          value: '1234453',
          label: '外盘',
        },
        {
          value: '1234453',
          label: '中市值',
        },
        {
          value: '1234453',
          label: '市盈率',
        },
        {
          value: '1234453',
          label: '市净率',
        },
        {
          value: '1234453',
          label: '流通市值',
        },
      ],
      // 切换k线图时间
      categoryTime: [
        {
          value: 0,
          label: '当日',
        },
        {
          value: 1,
          label: '五日',
        },
        {
          value: 2,
          label: '1分K',
        },
        {
          value: 3,
          label: '5分K',
        },
        {
          value: 4,
          label: '15分K',
        },
        {
          value: 5,
          label: '60分K',
        },
        {
          value: 6,
          label: '日K',
        },
        {
          value: 7,
          label: '周K',
        },
      ],
      currentCategoryTimeIndex: 0,
      // 买家
      tradingInfoBuy: [
        {
          label: '买一',
          value: '2.52',
          quantity: 832,
        },
        {
          label: '买二',
          value: '2.52',
          quantity: 832,
        },
        {
          label: '买三',
          value: '2.52',
          quantity: 8234232,
        },
        {
          label: '买四',
          value: '2.52',
          quantity: 8345332,
        },
        {
          label: '买五',
          value: '2.52',
          quantity: 832,
        },
      ],
      // 卖家
      tradingInfoSell: [
        {
          label: '卖一',
          value: '2.52',
          quantity: 1272352,
        },
        {
          label: '卖二',
          value: '2.52',
          quantity: 832,
        },
        {
          label: '卖三',
          value: '2.52',
          quantity: 832,
        },
        {
          label: '卖四',
          value: '2.52',
          quantity: 832,
        },
        {
          label: '卖五',
          value: '2.52',
          quantity: 832,
        },
      ],
    }
  },
  onLoad() {
    _self = this
    this.cWidth = uni.upx2px(750)
    this.cHeight = uni.upx2px(500)
    this.getServerData()
  },
  methods: {
    toCreateStrtegy() {
      uni.navigateTo({
        url: '/pages/create_strategy/create_strategy',
      })
    },
    getServerData() {
      uni.request({
        url: '../../common/data.json',
        data: {},
        success: function (res) {},
        fail: () => {
          _self.tips = '网络错误，小程序端请检查合法域名'
        },
        complete: () => {
          _self.showCandle('canvasCandle', Candle) // 渲染当日趋势图
          _self.showArea('canvasArea', Area) // 渲染k线图
        },
      })
    },
    showCandle(canvasId, chartData) {
      canvaCandle = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'candle',
        fontSize: 11,
        padding: [15, 15, 0, 15],
        legend: {
          show: true,
          padding: 5,
          lineHeight: 11,
          margin: 8,
        },
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        enableMarkLine: true /***需要开启标记线***/,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true, //不绘制X轴网格线
          labelCount: 4, //X轴文案数量
          //type:'grid',
          //gridType:'dash',
          itemCount: _self.itemCount, //可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
          scrollShow: true, //新增是否显示滚动条，默认false
          scrollAlign: 'right',
          //scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
          //scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
        },
        yAxis: {
          //disabled:true
          gridType: 'dash',
          splitNumber: 5,
          format: (val) => {
            return val.toFixed(0)
          },
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        dataLabel: false,
        dataPointShape: true,
        extra: {
          candle: {
            color: {
              upLine: '#f04864',
              upFill: '#f04864',
              downLine: '#2fc25b',
              downFill: '#2fc25b',
            },
            average: {
              show: true,
              name: ['MA5', 'MA10', 'MA30'],
              day: [5, 10, 20],
              color: ['#1890ff', '#2fc25b', '#facc14'],
            },
          },
          tooltip: {
            bgColor: '#000000',
            bgOpacity: 0.7,
            gridType: 'dash',
            dashLength: 5,
            gridColor: '#1890ff',
            fontColor: '#FFFFFF',
            horizentalLine: true,
            xAxisLabel: true,
            yAxisLabel: true,
            labelBgColor: '#DFE8FF',
            labelBgOpacity: 0.95,
            labelAlign: 'left',
            labelFontColor: '#666666',
          },
          markLine: {
            type: 'dash',
            dashLength: 5,
            data: [
              {
                value: 2150,
                lineColor: '#f04864',
                showLabel: true,
              },
              {
                value: 2350,
                lineColor: '#f04864',
                showLabel: true,
              },
            ],
          },
        },
      })
    },
    touchCandle(e) {
      canvaCandle.scrollStart(e)
      canvaArea.scrollStart(e)
      this.touchArea(e)
    },
    moveCandle(e) {
      canvaCandle.scroll(e)
      canvaArea.scroll(e)
    },
    touchEndCandle(e) {
      canvaCandle.scrollEnd(e)
      canvaArea.scrollEnd(e)
      //下面是toolTip事件，如果滚动后不需要显示，可不填写
      canvaCandle.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        },
      })
      //这里演示了获取点击序列的方法，如需要将数据显示到canvas外面，可用此方法。
      var xx = canvaCandle.getCurrentDataIndex(e)
      //console.log(canvaCandle.opts.series[0].data[xx]);
      //下面是计算好的MA均线集合，想要点击序列中的当前数据，需要自己遍历seriesMA
      //console.log(canvaCandle.opts.seriesMA);
    },

    sliderMove(e) {
      _self.itemCount = e.detail.value
      _self.zoomCandle(e.detail.value)
    },
    zoomCandle(val) {
      canvaCandle.zoom({
        itemCount: val,
      })
      canvaArea.zoom({
        itemCount: val,
      })
    },
    showArea(canvasId, chartData) {
      canvaArea = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: 'area',
        fontSize: 11,
        legend: true,
        dataLabel: false,
        dataPointShape: true,
        horizentalLine: true, //是否显示横向辅助线
        xAxisLabel: true, //是否显示X轴辅助标签
        yAxisLabel: true, //是否显示Y轴辅助标签
        background: '#FFFFFF',
        pixelRatio: _self.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        enableMarkLine: true,
        enableScroll: true, //开启图表拖拽功能
        xAxis: {
          disableGrid: true,
          type: "grid",
          gridType: "dash",
          itemCount: _self.itemCount,
          scrollShow: true,
          scrollAlign: "right",
          scrollBackgroundColor: "#F7F7FF",
          scrollColor: "#DEE7F7"
        },
        yAxis: {
          gridType: 'dash',
          gridColor: '#CCCCCC',
          dashLength: 8,
          splitNumber: 5,
          min: 10,
          max: 180,
        },
        width: _self.cWidth * _self.pixelRatio,
        height: _self.cHeight * _self.pixelRatio,
        extra: {
          area: {
            type: 'straight',
            opacity: 0.2,
            addLine: true,
            width: 2,
          },
          markLine: {
            type: 'dash',
            dashLength: 5,
            data: [
              {
                value: 2150,
                lineColor: '#f04864',
                showLabel: true,
              },
              {
                value: 2350,
                lineColor: '#f04864',
                showLabel: true,
              },
            ],
          },
        },
      })
    },
    touchArea(e) {
      console.log('touch area')
      canvaArea.showToolTip(e, {
        format: function (item, category) {
          return category + ' ' + item.name + ':' + item.data
        },
      })
    },
    changeCategoryTime(index, data) {
      this.currentCategoryTimeIndex = index
      // 在这里触发修改数据
      if (this.currentCategoryTimeIndex != 0) {
        canvaCandle.updateData(Candle) // 更新k线图数据
      }
    },
  },
}
</script>

<style lang="scss">
@import '@/common/scss/mixin.scss';
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
  width: 750upx;
  height: 500upx;
  background-color: #ffffff;
}

.charts {
  width: 750upx;
  height: 500upx;
  background-color: #ffffff;
}
.qiun-textarea {
  height: 300upx;
}

.flex {
  @include flex();
}

.green {
  color: green !important;
}

.btn {
  background: #e6bf64;
  color: #fff;
}

.top-t {
  @include flex(space-between, row, center);
  color: red;
  padding: 0 20upx;
  background: #e6bf64;
  &-l {
    font-weight: bold;
    font-size: 60upx;
  }
  &-r__txt {
    font-size: 30upx;
    font-weight: bold;
    margin-left: 30upx;
  }
}

.top-m {
  @include flex(); /*  */
  border-bottom: 1upx solid #eaeaea;
  margin: 20upx 0;
  &-item {
    flex: 1;
    @include flex(center, column, center);
    padding: 10upx 0;
    font-size: 26upx;
    font-weight: 400;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      top: 10upx;
      bottom: 10upx;
      right: 0;
      border-right: 1upx solid #eaeaea;
    }
    &__label {
      color: #9b9b9b;
    }
    &__value {
      color: #000;
    }
  }
}

.top-b {
  @include flex();
  flex-wrap: wrap;
  &-item {
    flex: 0 0 25%;
    @include flex(center, column, center);
    margin-bottom: 20upx;
    font-size: 26upx;
    font-weight: 400;
    &__label {
      color: #9b9b9b;
    }
    &__value {
      color: #000;
    }
  }
}

.tab-time-box {
  @include flex(space-between, row, center);
  padding: 10upx 30upx;
  font-size: 26upx;
  background: linear-gradient(to bottom, #e1e1e1, #f5f5f5);
  .tab-time.active {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-bottom: 1upx solid red;
    }
  }
  &__txt {
    flex: 1;
  }
}

.bottom {
  @include flex(space-between, row, flex-start);
  flex-wrap: wrap;
  padding: 20upx 20upx;
  &-row-l,
  &-row-r {
    flex: 0 0 46%;
    .bottom-row-item {
      @include flex(space-between, row, center);
      font-size: 30upx;
      white-space: nowrap;
      &__label {
        padding-right: 20upx;
        color: #9b9b9b;
      }
      &__value {
        flex: 1;
      }
      &__quantity {
        flex: 0 0 2;
      }
    }
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
}
</style>
